<template>
	<view class="orderInfoBox">
		<n-loading></n-loading>
		<view v-if="orderInfo">
			<!-- 地址 -->
			<view class="takeGoodsTips">
				<view class="tipsContBox" v-if="addressInfo!=null" @tap="changeAddress">
					<view class="tipsCont" v-if="addressInfo">
						<view class="tipsContTit">
							<text>{{addressInfo.name}}</text>
							<text>{{addressInfo.phone}}</text>
						</view>
						<view class="tipsContInfo">{{addressInfo.address_detail}}</view>
					</view>
					<u-icon name="arrow-right" color="#333333" size="20"></u-icon>
				</view>
				<view class="tipsContBox" v-if="addressInfo==null" @tap="changeAddress">
					<view class="tipsCont">
						<view class="tipsContTit">
							请添加收货地址
						</view>
					</view>
					<u-icon name="arrow-right" color="#333333" size="20"></u-icon>
				</view>
				<!-- 商品详情 -->
				<view class="useRule">
					<view class="orderTiem">
						<view>{{getdate(orderInfo.created_at,1)}}</view>
					</view>
					<view class="orderInfo" v-for="(goods,index) of orderInfo.items">
						<!-- <image :src="goods.image"></image> -->
						<dh-image class="niccImg" :src="goods.image" errorSrc="https://lovebirdopen.com/static/img/cBj/dPicture.png"></dh-image>
						<view class="orderRight">
							<view class="title ellipsis">{{goods.name}}</view>
							<view class="parameter"><label>{{goods.specs}}</label></view>
							<view class="orderPrice">
								<view class="showPrice">
									￥<text>{{goods.price}}</text>
								</view>
								<view>数量 x {{goods.num}}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 订单详情 -->
				<view class="orderDetails">
					<view class="detailsEach">商品总价<text>￥{{orderInfo.order_amount}}</text></view>
					<view class="detailsEach">优惠金额<text class="orange">-￥{{orderInfo.order_pmt==null?'0':orderInfo.order_pmt}}</text></view>
					<view class="detailsEach">运费<text class="orange">￥{{parseFloat(postage)}}</text></view>
					<view class="detailsEach">已付款<text class="orange">￥{{parseFloat(orderInfo.pay_amount)}}</text></view>
					<view class="detailsEach2 borderLine">另需付款<text class="orange">￥{{parseFloat(postage)}}</text></view>
					<view class="detailsEach">订单编号<text>{{orderInfo.id}}</text></view>
					<view class="detailsEach">下单时间<text>{{getdate(orderInfo.created_at,1)}}</text></view>
					<!-- <view class="detailsEach">电子发票<text>请联系客服索取发票</text></view> -->
				</view>
			</view>
			<!-- 按钮 -->
			<view class="addBtnBox" :style="{paddingBottom:isIphoneX?'76rpx':''}">
				<view class="addAddressBtn" @tap="okOrder">确认订单</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 手机机型
				modelmes:null,
				isIphoneX:false,
				orderInfo:null,
				orderId:null,
				cardId:null,
				product:{
					id:'',
					num:1
				},
				coupon:'',
				sId:null,
				ship_id:'',
				addressInfo:null,
				// 邮费
				postage:0,
			}
		},
		onShow(){
			var _this = this;
			if(this.orderId!=null){//返回
				uni.getStorage({
					key: 'sId',
					success: function (res) {
						_this.sId = res.data;
						_this.getOrderInfo(_this.orderId);
					}
				});
			}
		},
		onLoad: function (option) {
			// 判断机型iPhone X的
			this.modelmes = uni.getStorageSync('modelmes');
			if (this.modelmes.search('iPhone X') != -1) {
			   this.isIphoneX = true;
			}
			this.orderId = option.orderId;
			this.cardId = option.cardId;
			this.getOrderInfo(option.orderId);
		},
		methods: {
			getAddress(id){
				// 获取地址列表
				this.apiget('/fun/ship-address/index').then(res =>{
					if(res.data.status == 200 ) {
						var dataRe = res.data.data;
						var addressList = dataRe.filter(v => {
							return v.id == id;
						});
						if(addressList.length>0){
							this.addressInfo = addressList[0];
						}
					}
				})
			},
			// 获取邮费
			getFreight(product,shipId){
				this.apipost('/fun/order/get-freight',{product:JSON.stringify(product),ship_id:shipId}).then(res =>{
					if(res.data.status == 200 ) {
						this.postage = res.data.data.freight;
					}
				})
			},
			getOrderInfo(id){
				this.apiget('/fun/order/view',{id:id,f:1}).then(res =>{
					if(res.data.status == 200 ) {
						this.orderInfo = res.data.data;
						this.product.id= res.data.data.items[0].product_id,
						this.product.num= res.data.data.items[0].num,
						this.coupon = res.data.data.coupon;
						if(this.sId==null){
							this.ship_id = res.data.data.ship_id?res.data.data.ship_id:'';
						}else{
							this.ship_id = this.sId;
							this.getFreight(this.product,this.ship_id);
						}
						this.getAddress(this.ship_id);
					}
				})
			},
			// 支付
			okOrder(){
				var _this = this;
				if(this.ship_id==''){
					uni.showToast({
						icon: 'none',
						duration:1000,
						title: '请填写您的收货地址信息'
					});
					return false;
					
				}
				this.apipost('/fun/order/create',{product:JSON.stringify(_this.product),ship_id:_this.ship_id,coupon:_this.coupon,is_offline:0,liquor_card_id:_this.cardId}).then(res =>{
					if(res.data.status == 200 ) {
						var order_id = res.data.data.order_id;
						this.apiget('/fun/pay/pay-params',{order_id:order_id,payment_code :'wechatpay',payment_type :'lite'}).then(res =>{
							if(res.data.status == 200 ) {
								var payData = res.data.data;
								payData.provider='wxpay';
								payData.success=function (res) {
									uni.removeStorage({
										key: 'sId',
										success: function (res) {
											
										}
									});
									uni.showToast({
										icon: 'success',
										duration:1000,
										title: '转线上发货成功',
										success: res => {
											setTimeout(function (){
												uni.redirectTo({
													url: '../order/order?tab=0'
												});
											}, 1000);
										},
									});
								};
								payData.fail=function (err) {
									console.log('fail:' + JSON.stringify(err));
								};
								uni.requestPayment(payData);
							}
						})
					}
				})
			},
			// 修改地址
			changeAddress(){
				uni.navigateTo({
					url: '../address/address?tlId='+this.orderId+'&cId='+this.cardId
				});
			}
		}
	}
</script>

<style lang="scss">
	.orderInfoBox{
		min-height: 100%;
		padding-bottom: 160rpx;
		padding-top: 36rpx;
		background-color: #F8F8FA;
	}
	.titleBg{
		width: 100%;
		height: 200rpx;
		position: absolute;
		top: 0;
		left:0;
	}
	.orderStatesBox{
		position: relative;
		display: flex;
		align-items: center;
	}
	.orderStates{
		flex: auto;
		padding: 20rpx 32rpx;
		font-size: 32rpx;
		line-height: 48rpx;
		color: #fff;
		
		.orderStatesTips{
			font-size: 24rpx;
			line-height: 40rpx;
		}
	}
	.orderStatesR{
		flex: auto;
		padding-right: 32rpx;
		font-size: 24rpx;
		color: #fff;
		text-align: right;
	}
	.takeGoodsTips{
		position: relative;
		padding: 0 32rpx;
		
		.tipsContBox{
			// min-height: 100rpx;
			padding: 24rpx 32rpx;
			display: flex;
			background-color: #fff;
			box-shadow: 0px 4rpx 8rpx rgba(0, 0, 0, 0.02);
			border-radius: 16rpx;
			
			.tipsCont{
				flex: auto;
				margin-left: 32rpx;
				
				.tipsContTit{
					font-size: 32rpx;
					line-height: 48rpx;
					color: #333;
					
					text{
						margin-right: 20rpx;
					}
				}
				.tipsContInfo{
					font-size: 24rpx;
					line-height: 40rpx;
					color: #666;
				}
			}
		}
	}
	.useRule{
		padding: 20rpx 32rpx 16rpx;
		margin-top: 16rpx;
		background-color: #fff;
		border-radius: 16rpx;
		
		.orderTiem {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #666666;
		
			.orderState {
				color: #FF5238;
			}
			
			.orderState2{
				color: #666;
			}
		}
		.orderInfo {
			margin-top: 36rpx;
			display: flex;
			align-items: center;
		
		
		
			.orderPrice {
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
		
				.showPrice {
					font-weight: 28rpx;
				}
			}
		
			image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 8rpx;
			}
			
			.niccImg{
				width: 160rpx;
				height: 160rpx;
				border-radius: 8rpx;
			}
		
			.orderRight {
				flex: auto;
				width: 1px;
				margin-left: 10rpx;
		
				.title {
					font-weight: 600;
					font-size: 28rpx;
				}
		
				.parameter {
					margin-top: 24rpx;
					font-size: 24rpx;
					color: #666666;
		
					label {
						padding: 4rpx 12rpx;
						border-radius: 4px;
					}
		
					.u-icon {
						margin-left: 10rpx;
					}
				}
			}
		}
		
		
	}
	.orderDetails{
		padding: 26rpx 32rpx;
		margin-top: 16rpx;
		background-color: #fff;
		border-radius: 16rpx;
		
		.detailsEach{
			margin-bottom: 20rpx;
			font-size: 24rpx;
			line-height: 40rpx;
			color: #666666;
			
			text{
				float: right;
			}
		}
		.detailsEach2{
			font-size: 32rpx;
			line-height: 44rpx;
			color: #333333;
			font-weight: bold;
			
			text{
				float: right;
			}
		}
		.orange{
			color: #FF5238;
		}
		.borderLine{
			padding-bottom: 25rpx;
			margin-bottom: 16rpx;
			border-bottom: 2rpx solid #EEEFF3;
		}
	}
	.addBtnBox{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 8rpx 32rpx 28rpx;
		line-height: 80rpx;
		background-color: #fff;
		
		.addAddressBtn{
			height: 80rpx;
			background: #FF5238;
			border-radius: 44rpx;
			font-size: 32rpx;
			color: #fff;
			text-align: center;
		}
	}
</style>
